@import "mixin";

@mixin confirm-btn {
  width: rem(345px);
  height: rem(49px);
  line-height: rem(49px);
  text-align: center;
  border-radius: rem(4px);
  background-color: #dc3838;
  font-size: rem(18px);
  color: #ffffff;
}

.banner {
  margin-bottom: rem(15px);
  width: 100%;
  height: rem(200px);
  >img {
    width: 100%;
  }
}
.form {
  margin-bottom: rem(25px);
  width: 100%;
  @include border-top-1px(#e5e5e5);
  >.form-group {
    display: flex;
    width: 100%;
    height: rem(44px);
    line-height: rem(44px);
    background-color: #fff;
    @include border-bottom-1px(#e5e5e5);
    font-size: 0;
    &.split {
      margin-top: rem(15px);
    }
    >input {
      flex: 1;
      padding-left: rem(16px);
      height: 100%;
      font-size: rem(16px);
      color: #999999;
    }
    >.verify-code-wrapper {
      flex: 0 0 rem(91px);
      width: rem(91px);
      height: 100%;
    }
    >.phone-text-wrapper {
      flex: 0 0 rem(91px);
      width: rem(91px);
      height: 100%;
      >button {
        position: relative;
        background-color: #fff;
        padding: rem(12px);
        font-size: rem(13px);
        color: #dc3838;
        &:before {
          position: absolute;
          top: 50%;
          left: 0;
          margin-top: rem(-10px);
          content: '';
          width: 1px;
          height: rem(20px);
          background-color: #e5e5e5;
        }
      }
    }
  }
}
.btn-wrapper {
  text-align: center;
  font-size: 0;
  >a {
    display: inline-block;
    @include confirm-btn
  }
  >p {
    font-size: rem(14px);
    color: #333333;
    >a {
      padding: rem(15px);
      &.iforgot {
        float: left;
      }
      &.register-btn {
        float: right;
      }
    }
  }
}

.wx-bangding-layer {
  box-sizing: border-box!important;
  padding-top: rem(20px);
  width: rem(280px);
  height: rem(95px);
  >.content-wrapper {
    >.text {
      text-align: center;
      font-size: rem(12px);
      color: #999999;
    }
  }
}

.wx-bangding-result-layer {
  box-sizing: border-box!important;
  padding-top: rem(20px);
  width: rem(280px);
  height: rem(95px);
  >.content-wrapper {
    >h4 {
      text-align: center;
      line-height: rem(36px);
      font-size: rem(18px);
      color: #333333;
    }
    >.text {
      text-align: center;
      font-size: rem(12px);
      color: #999999;
    }
  }
}